import React, { useState, useEffect } from "react";
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UserOutlined,
    LoginOutlined,
    BugFilled,
    VideoCameraOutlined,
    CompassFilled,
    CloseSquareOutlined,
} from "@ant-design/icons";
import { useNavigate, useLocation, Outlet } from "react-router-dom";
import {
    Layout,
    Menu,
    theme,
    ConfigProvider,
    Button,
    message,
    Dropdown,
    Flex,
    Avatar,
    Space,
} from "antd";
import { useAuth0 } from "@auth0/auth0-react";

const { Header, Content, Footer, Sider } = Layout;
const defaultData = {
    borderRadius: 6,
    colorPrimary: "#63e2ff",
    Button: {
        colorPrimary: "#63e2ff",
    },
};
const dropDownItems = [
    {
        label: "User Profile",
        key: "1",
    },
    {
        type: "divider",
        key: "3",
    },
    {
        label: "LogOut",
        key: "2",
        icon: <LoginOutlined />,
        danger: true,
    },
];

const AppLayout = () => {
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    const location = useLocation();
    const handleResize = () => {
        if (window.innerWidth < 768) {
            // 自动折叠菜单
            setCollapsed(true)
        } else {
            // 断点>768px，当屏幕宽度大于此值时，将菜单设置为展开状态
            setCollapsed(false)
        }
    }
    useEffect(() => {
        // 使用useEffect监听窗口大小变化
        window.addEventListener('resize', handleResize);
        // 清理事件监听器
        return () => window.removeEventListener('resize', handleResize);
    }, []);
    const routerMenus = [
        {
            label: "move-table",
            icon: <VideoCameraOutlined />,
            key: "/app/movieList",
            path: "/app/movieList",
        },
        {
            label: "user-profile",
            icon: <UserOutlined />,
            key: "/app/profile",
            path: "/app/profile",
        },
        {
            label: "debug-analysis",
            icon: <BugFilled />,
            key: "/app/debugger",
            path: "/app/debugger",
        },
        {
            label: "external-api",
            icon: <CompassFilled />,
            key: "/app/outerPage",
            path: "/app/outerPage",
        },
        {
            label: "Not Found",
            icon: <CloseSquareOutlined />,
            key: "/app/NotFond",
            path: "/app/NotFond",
        },
    ];
    const navigate = useNavigate();
    const [collapsed, setCollapsed] = useState(false);
    const { user, isLoading, logout } = useAuth0();
    const handleMenuClick = (e) => {
        console.log("click", e);
        if (e.key === "1") {
            navigate("/app/profile");
        } else {
            logout({ returnTo: window.location.origin });
        }
    };
    const menuProps = {
        items: dropDownItems,
        onClick: handleMenuClick,
    };
    if (isLoading) {
        navigate("/verify-user");
        return <div className="loading">Loading...</div>;
    }




    return (
        <ConfigProvider
            theme={{
                token: {
                    colorPrimary: defaultData.colorPrimary,
                    borderRadius: defaultData.borderRadius,
                },
                components: {
                    Button: {
                        colorPrimary: defaultData.Button?.colorPrimary,
                        algorithm: defaultData.Button?.algorithm,
                    },
                },
            }}
        >
            <Layout style={{ height: "100vh" }}>
                <Sider
                    breakpoint="lg"
                    collapsedWidth="0"
                    trigger={null}
                    collapsible
                    collapsed={collapsed}
                    onBreakpoint={(broken) => {
                        console.log(broken);
                    }}
                    onCollapse={(collapsed, type) => {
                        console.log(collapsed, type);
                    }}
                >
                    <div className="demo-logo-vertical" />
                    <Menu
                        theme="dark"
                        mode="inline"
                        defaultSelectedKeys={["/app/movieList"]}
                        onClick={(e) => {
                            console.log("click ", e);
                            console.log("click ", location);
                            if (location.pathname !== e.key) {
                                navigate(e.key);
                            }
                        }}
                        items={routerMenus.map((item, index) => ({
                            key: item.key,
                            icon: item.icon,
                            label: item.label,
                        }))}
                    />
                </Sider>
                <Layout>
                    <Header
                        style={{
                            padding: 0,
                            background: colorBgContainer,
                            position: "relative",
                        }}
                    >
                        {/* <Menu theme="light" mode="horizontal" defaultSelectedKeys={['2']} items={items1} /> */}
                        <Flex justify="space-between" align="center">
                            <div>
                                <Button
                                    type="text"
                                    icon={
                                        collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />
                                    }
                                    onClick={() => setCollapsed(!collapsed)}
                                    style={{
                                        fontSize: "16px",
                                        width: 64,
                                        height: 64,
                                    }}
                                />
                            </div>
                            <div>
                                <Dropdown menu={menuProps} placement="bottom">
                                    <div>
                                        <Space style={{ marginRight: "10px" }}>
                                            {user.name}
                                            <Avatar src={user.picture} />
                                        </Space>
                                    </div>
                                </Dropdown>
                            </div>
                        </Flex>
                    </Header>
                    <Content
                        style={{
                            margin: "24px 16px 0",
                            maxHeight: "75vh",
                            overflowY: "auto",
                        }}
                    >
                        <div
                            style={{
                                padding: 24,
                                minHeight: 420,
                                background: colorBgContainer,
                            }}
                        >
                            <Outlet />
                        </div>
                    </Content>
                    <Footer
                        style={{
                            textAlign: "center",
                        }}
                    >
                        CineRate ©2023 Created by ZIHAO LI
          </Footer>
                </Layout>
            </Layout>
        </ConfigProvider>
    );
};
export default AppLayout;
